<template>
  <div><Charts :option="option" /></div>
</template>

<script>
import Charts from "@/components/Charts.vue";
export default {
  name: "Chart1",
  components: { Charts },
  props: ["chartData"],
  data() {
    return {
      option: {},
    };
  },
  mounted() {
    this.computedOption();
  },
  methods: {
    computedOption() {
      //valueList
      const data1 = [
        { value: this.chartData.indexList?.[0] || 0, name: "目标值" },
        { value: this.chartData.valueList?.[0] || 0, name: "完成值" },
      ];
      const data2 = [
        { value: this.chartData.indexList?.[1] || 0, name: "目标值" },
        { value: this.chartData.valueList?.[1] || 0, name: "完成值" },
      ];
      const option = {
        title: [
          {
            text: "总体情况(万元)",
          },
          {
            subtext: "营业收入",
            right: "78%",
            top: "85%",
            textAlign: "center",
          },
          {
            subtext: "净利润",
            left: "80%",
            top: "85%",
            textAlign: "center",
          },
        ],
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          align: "right",
          right: 0,
        },
        series: [
          {
            name: "营业收入",
            type: "pie",
            radius: "50%",
            center: ["50%", "50%"],
            data: data1,
            label: {
              position: "inside",
              alignTo: "none",
              bleedMargin: 5,
              formatter: "{b}<br/>{c}万元",
            },
            left: 0,
            right: "60%",
            top: 0,
            bottom: 0,
          },
          {
            name: "净利润",
            type: "pie",
            radius: "50%",
            center: ["50%", "50%"],
            data: data2,
            label: {
              position: "inside",
              alignTo: "labelLine",
              bleedMargin: 5,
              formatter: "{b}<br/>{c}万元",
            },
            left: "60%",
            top: 0,
            bottom: 0,
          },
        ],
      };
      this.option = option;
    },
  },
  watch: {
    chartData: {
      immediate: true,
      handler() {
        this.computedOption();
      },
    },
  },
};
</script>

<style>
</style>